<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>

<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>option</title>
<!--모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png" />
<!-- bootstrap -->
<link rel="stylesheet" type="text/css"
	href="assets/css/bootstrap.min.css" />
<!--나눔고딕 웹 폰트 적용 -->
<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
<!--반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/nonresponsive.css" /> -->
<!--IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->
<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  

<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/string.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style type="text/css">
body {
	text-align: center;
}

.container {
	max-width: 2000px;
	padding-left: 0;
	padding-right: 0;
	margin-right: 0;
	margin-left: 0;
}

nav.navbar {
	line-height: 50px;
}

.navbar span {
	margin-left: -33px;
	color: #FFFFFF;
	font-size: 16px;
}

.nav_btns {
	width: 50px;
}

#header-btn2 {
	position: fixed;
	right: 0%;
	top: 10px;
	margin-right: 2px;
}

input[type="checkbox"]+label {
	display: inline-block;
	width: 80%;
	line-height: 40px;
	background-color: #5bc0de;
	border-radius: 7px;
	cursor: pointer;
	margin-top: 5px;
}

input[type="checkbox"]:checked+label {
	background-color: #428bca;
}

input[type="checkbox"] {
	display: none;
}

input[type="radio"]+label {
	display: inline-block;
	width: 80%;
	line-height: 40px;
	background-color: #bcbcbc;
	border-radius: 7px;
	cursor: pointer;
	margin-top: 5px;
	margin-left: -4px;
}

@media (min-width: 768px) {
	input[type="radio"]+label {
		width: 20%;
		line-height: 34px;
		border-radius: 0;
	}
	
	input[id="radio1"]+label {
		border-top-left-radius: 7px;
		border-bottom-left-radius: 7px;
	}
	
	input[id="radio4"]+label {
		border-top-right-radius: 7px;
		border-bottom-right-radius: 7px;
	}
	
	input[id="radio5"]+label {
		border-top-left-radius: 7px;
		border-bottom-left-radius: 7px;
	}
	
	input[id="radio8"]+label {
		border-top-right-radius: 7px;
		border-bottom-right-radius: 7px;
	}
	
	input[type="checkbox"]+label {
		line-height: 34px;
	}
}

input[type="radio"]:checked+label {
	background-color: rgb(240, 173, 78);
}

input[type="radio"] {
	display: none;
}

.ui-dialog-titlebar {
	display: none;
}
</style>

</head>



<body>
	<!-- 옵션 값 저장 확인 팝업박스....-->
	<div class="popup-box">
		<p>
			현재 설정 값을 <br /> 저장 하시겠습니까?
		</p>
		<div>
			<button id="ok" class="btn btn-primary pull-left">확인</button>
			<button id="cancel" class="btn btn-primary pull-right">취소</button>
		</div>
	</div>
	<!-- 옵션 값 저장 확인 팝업박스 끝....-->

	<!-- 상단 해더 바 -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container text-center">

			<span id="title"><strong>Option</strong></span>
			<div class="pull-right">
				<button class="btn btn-inverse nav_btns" id="header-btn2">저장</button>

			</div>

			<div class="pull-left">
				<button class="btn btn-info nav_btns" onclick="history.back(); ">
					<i class="icon-arrow-left"></i>
				</button>
			</div>
		</div>
	</nav>


	<div class="container" style="margin-top : 50px;">
		<input type="checkbox" id="check"><label for="check" id="set_alarm">알람 사용</label>
		<div>
			<h4>알람 시간 설정</h4>
			<fieldset>
				<input type="radio" id="radio1" name="radio" checked="checked"><label for="radio1">5분</label>
				<input type="radio" id="radio2" name="radio"><label for="radio2">10분</label>
				<input type="radio" id="radio3" name="radio"><label for="radio3">15분</label>
				<input type="radio" id="radio4" name="radio"><label for="radio4">20분</label>
			</fieldset>
		</div>
		<div>
			<h4>알람 거리 설정</h4>
			<fieldset>
				<input type="radio" id="radio5" name="radio2" checked="checked"><label for="radio5">30m</label>
				<input type="radio" id="radio6" name="radio2"><label for="radio6">50m</label>
				<input type="radio" id="radio7" name="radio2"><label for="radio7">100m</label>
				<input type="radio" id="radio8" name="radio2"><label for="radio8">150m</label>
			</fieldset>
		</div>
	</div>
	<!--Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	
	<script type="text/javascript">
		var alarmDB = {};
		alarmDB.webdb = {};
		alarmDB.webdb.db = null;
	      
		alarmDB.webdb.open = function() {
			var dbSize = 1 * 1024 * 1024; // 5MB
			alarmDB.webdb.db = openDatabase("alarmDB", "1.0", "알람DB", dbSize);
		};
	      
		alarmDB.webdb.onError = function(tx, e) {
			alert("There has been an error: " + e.message);
		};
	      
		alarmDB.webdb.onSuccess = function(tx, r) {
		};
		
		alarmDB.webdb.update = function(key,value) {		
			var db = alarmDB.webdb.db;
	
			db.transaction(function(tx){
				tx.executeSql("update alarmDB set value=? where key=?", [value, key], alarmDB.webdb.onSuccess, alarmDB.webdb.onError);
			});
		};
		
		alarmDB.webdb.getAllalarmItems = function(renderFunc) {
			var db = alarmDB.webdb.db;
			db.transaction(function(tx) {
				tx.executeSql("SELECT * FROM alarmDB", [], renderFunc,
						alarmDB.webdb.onError);
			});
		};
		
		function loadalarmList(tx, rs) {
			for (var i=0; rs.rows.length; i++) {
				if (rs.rows.item(i).key == "is_alarm") {
					if (rs.rows.item(i).value == "true") {						
						$('input[type="checkbox"]').attr("checked", false);
						$('fieldset').attr('disabled',false);
						$('#set_alarm').html('알람 사용');
						
					} else if (rs.rows.item(i).value == "false") {
						$('input[type="checkbox"]').attr("checked", true);
						$('fieldset').attr('disabled',true);
						$('#set_alarm').html('알람 사용 안함');
						
						
					}
				} else if (rs.rows.item(i).key == "set_time") {
					if (rs.rows.item(i).value == 0) {
						for (var j=0; j < $('input[name="radio"]').length; j++) {
							$('input[name="radio"]')[j].checked = false;
						}
					} else if (rs.rows.item(i).value == 5) {
						$('input[name="radio"]')[0].checked = true;
					} else if (rs.rows.item(i).value == 10) {
						$('input[name="radio"]')[1].checked = true;
					} else if (rs.rows.item(i).value == 15) {
						$('input[name="radio"]')[2].checked = true;
					} else if (rs.rows.item(i).value == 20) {
						$('input[name="radio"]')[3].checked = true;
					}
				} else if (rs.rows.item(i).key == "set_dis") {
					if (rs.rows.item(i).value == 0) {
						for (var j=0; j < $('input[name="radio2"]').length; j++) {
							$('input[name="radio2"]')[j].checked = false;
						}
					} else if (rs.rows.item(i).value == 30) {
						$('input[name="radio2"]')[0].checked = true;
					} else if (rs.rows.item(i).value == 50) {
						$('input[name="radio2"]')[1].checked = true;
					} else if (rs.rows.item(i).value == 100) {
						$('input[name="radio2"]')[2].checked = true;
					} else if (rs.rows.item(i).value == 150) {
						$('input[name="radio2"]')[3].checked = true;
					}
				}
			}
		}
	
		$(function() {
			alarmDB.webdb.open();
			alarmDB.webdb.getAllalarmItems(loadalarmList);
			
			/* 팝업 */
			$(".popup-box").dialog({
				autoOpen : false, // 페이지 로드 시 바로 작동할지 on/off
				modal : true, // 팝업 시 다른 기능 잠금 on/off (alert 기능)
				resizable : false, // 마우스로 팝업 창 크기 변경 on/off
				draggable : false
			// 마우스로 팝업 창 이동 on/off
			});
			
			$('input[type="checkbox"]').click(function() {
				if (this.checked) {
					$('fieldset').attr('disabled',true);
					$('#set_alarm').html('알람 사용 안함');
					for (var i=0; i < $('input[name="radio"]').length; i++) {
						$('input[name="radio"]')[i].checked = false;
					}
					
					for (var i=0; i < $('input[name="radio2"]').length; i++) {
						$('input[name="radio2"]')[i].checked = false;
					}
				} else if (!this.checked) {
					$('fieldset').attr('disabled',false);
					$('#set_alarm').html('알람 사용');
					
					$('input[name="radio"]')[0].checked = true;
					$('input[name="radio2"]')[0].checked = true;
				}
			});
			
			$('#header-btn2').click(function() {
				$('.popup-box').dialog("open");
			});
			
			$('#ok').click(function() {
				if ($('input[type="checkbox"]').is(":checked")) {
					alarmDB.webdb.update("is_alarm", false);
					alarmDB.webdb.update("set_time", 0);
					alarmDB.webdb.update("set_dis", 0);
				} else if (!$('input[type="checkbox"]').is(":checked")) {
					var time = [5, 10, 15, 20];
					var dis = [30, 50, 100, 150];
					
					alarmDB.webdb.update("is_alarm", true);
					
					for (var i=0; i < $('input[name="radio"]').length; i++) {
						if ($('input[name="radio"]')[i].checked == true) {
							alarmDB.webdb.update("set_time", time[i]);
						}
					}
					
					for (var i=0; i < $('input[name="radio2"]').length; i++) {
						if ($('input[name="radio2"]')[i].checked == true) {
							alarmDB.webdb.update("set_dis", dis[i]);
						}
					}
				}
				
				$('.popup-box').dialog("close");
			});
			
			$('#cancel').click(function() {
				$('.popup-box').dialog("close");
			});
		});
	</script>
</body>
</html>
